<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态下拉导航栏</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background: #d6d6d6;
        }
        nav{
            width: 100%;
            height: 60px;
            background: #4a4a4a;
        }
        .title,#text1,#text2{
            line-height: 60px;
            float: left;
            display: inline-block;
            color: #ececec;
            width: 100px;
            text-align: center;
        }
        .title{
            color: white;
            width: 120px;
            text-transform: uppercase;
            font-family:fantasy;
        }
        #list1,#list2{
            list-style: none;
            background: white;
            text-align: center;
            width: 120px;
            line-height: 60px;
            border-radius: 5px;
            z-index: -1;
            position: absolute;
            left: 135px;
            top: -120px;
        }
        #list2{
            left: 235px;
        }
        #text1:hover,
        #text2:hover{
            color: white;
            cursor: pointer;
        }
        #text1:hover ~ #list1,#text2:hover ~ #list2{
            top: 60px;
            transition-duration: 0.5s;
        }
        #list1:hover,#list2:hover{
            top: 60px;
            cursor: pointer;
        }
        .content1:hover,
        .content2:hover{
            background: #747474;
            border-radius: 5px;
            cursor: pointer;
        }
        b{
            border-style: solid;
            border-width: 5px;
            border-color: white transparent transparent transparent;
            position: relative;
            top: 13px;
            left: 2px;
        }
    </style>
</head>
<body>
    <nav>
        <h1 class="title">Design</h1>
        <ul>
            <li id="text1">text1<b></b></li>
            <li id="text2">text2<b></b></li>

            <ul id="list1">
                <li class="content1">content11</li>
                <li class="content1">content11</li>
                <li class="content1">content11</li>
            </ul>

            <ul id="list2">
                <li class="content2">content22</li>
                <li class="content2">content22</li>
                <li class="content2">content22</li>
            </ul>
        </ul>
    </nav>
</body>
</html>